<template>
	<view class="zone">
		<Header title="潮玩任务" :headertype="1"></Header>
		<view class="main">
			<view class="tab">
				<view v-for="(item,index) in tablist" :key="index" :class="[stat == item.id?'active':'']"
					@click="tabchange(item.id)">{{item.name}}</view>
			</view>

			<scroll-view scroll-y class="scorllbox">
				<!-- 列表 -->
				<view class="list" v-show="stat == 1">
					<view class="item" v-for="(item , index) in list" :key="index"> 	
						<view class="left">
							<p>{{item.name}}</p>
							<view>
								<image v-if="item.type == 1"  src="http://img.cpgm.cc/cwxy/static/public/yuanbao.png" mode="widthFix" />
								<image v-if="item.type == 2"  src="http://img.cpgm.cc/cwxy/static/self/3.png" mode="widthFix" />
								<image v-if="item.type == 3" src="http://img.cpgm.cc/cwxy/static/self/baoshi.png" mode="widthFix" />
								<text>{{item.raward}}</text>
							</view>
						</view>
						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000" class="button" :class="[!!item.is_rece?'grey':'']" @click="receive(item)">
									{{!!item.is_rece?'已领取':'领取'}}
								</u-button>
					</view>
				</view>
				

				<view class="list" v-show="stat == 2">
					<view class="item" v-for="(item , index) in invitelsit" :key="item.id"> 	
						<view class="left">
							<p>邀请{{item.num}}名1队好友完成实名认证(<text>{{check_nums}}</text> / {{item.num}} ) </p>
							<view>
								<text v-if="index == 0">奖励：开通渠道收益 + 团队奖励（自动开通）</text>
								<text v-else>奖励：{{item.yuanbao}}元宝(已自动发放) + {{item.jewel}}钻石 </text>
							</view>
						</view>
						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000" class="button" :class="[!!item.is_rece?'grey':'']" @click="receiveface(item)">
									{{!!item.is_rece?'已领取':'领取'}}
								</u-button>
					</view>
					<view class="item" v-for="item in carddatalist" :key="item.id"> 	
						<view class="left">
							<p>1队好友累计获得{{item.num}}张潮玩兔卡</p>
							<view>
								<text>奖励：{{item.jewel}}钻石 <image class="zs" src="http://img.cpgm.cc/cwxy/static/self/3.png" mode="widthFix" />  </text>
							</view>
						</view>
						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000" class="button" :class="[!!item.is_rece?'grey':'']" @click="receivecard(item)">
									{{!!item.is_rece?'已领取':'领取'}}
								</u-button>
					</view>
				</view>

				<!-- 列表 -->
				<view class="list" v-show="stat == 3">
					<view class="item" v-for="(item , index) in gmlist" :key="index"> 	
						<view class="left">
							<p>{{item.name}}</p>
							<view>
								<image v-if="item.type == 1"  src="http://img.cpgm.cc/cwxy/static/public/yuanbao.png" mode="widthFix" />
								<image v-if="item.type == 2"  src="http://img.cpgm.cc/cwxy/static/self/3.png" mode="widthFix" />
								<image v-if="item.type == 3" src="http://img.cpgm.cc/cwxy/static/self/baoshi.png" mode="widthFix" />
								<text>{{item.raward}}</text>
							</view>
						</view>
						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000" class="button" :class="[!!item.is_rece?'grey':'']" @click="getGmTask(item)">
									{{!!item.is_rece?'已领取':'领取'}}
								</u-button>
					</view>
				</view>
			</scroll-view>

		</view>



		<!-- 请输入兑换码 -->
		<u-mask :show="show">
			<view class="warp">
				<view class="givebox">
					<view class="m_title">
						<text>请输入兑换码</text>
					</view>
					<view class="m_list">
						<view class="m_item">
							<text>兑换码</text>
							<input type="number" v-model="numdata" placeholder="请输入兑换码"
								placeholder-class="plch" />
						</view>
					</view>
					<view class="flexbtn">
						<view class="button quit">兑换码888888</view>
						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
						class="button confirm" @click="exchange()">确认</u-button>
					</view>
				</view>

				<image class="closed" @click="show = false" src="http://img.cpgm.cc/panda/static/my/cha.png" mode="widthFix" />
			</view>
		</u-mask>





		<!-- 结果弹窗 -->
		<u-mask :show="showresult">
			<view class="warp">
				<view class="maskbox">
					<view class="in">
						<view class="title">
							<image src="http://img.cpgm.cc/cwxy/static/home/banner.png" mode="widthFix" />
							<text>任务奖励</text>
						</view>
						<view class="result_con">
							<p>恭喜您完成任务</p>
							<p>获得{{resulttitle}}{{currencytype==1?'元宝':currencytype==2?'钻石':'宝石'}}</p>
							<view class="ybnum">
								<image :src="currencytype==1?'http://img.cpgm.cc/cwxy/static/public/yuanbao.png':currencytype==2?'http://img.cpgm.cc/cwxy/static/self/3.png':'http://img.cpgm.cc/cwxy/static/mine/shitou2.png'" mode="widthFix" />
								<text>{{resulttitle}}{{currencytype==1?'元宝':currencytype==2?'钻石':'宝石'}}</text>
							</view>
						</view>
						<view class="button" @click="showresult = false">开心收下</view>
					</view>
				</view>
			</view>
		</u-mask>

				<!-- 结果弹窗 -->
		<u-mask :show="tworesult">
			<view class="warp">
				<view class="maskbox">
					<view class="in">
						<view class="title">
							<image src="http://img.cpgm.cc/cwxy/static/home/banner.png" mode="widthFix" />
							<text>任务奖励</text>
						</view>
						<view class="result_con">
							<p>恭喜您完成任务</p>
							<p>获得{{inviteyb}}元宝 + {{invitezs}}钻石</p>
							<view class="flexbox">
								<view class="ybnum">
									<image src="http://img.cpgm.cc/cwxy/static/public/yuanbao.png" mode="widthFix" />
									<text>{{inviteyb}}元宝</text>
								</view>
								<view class="ybnum">
									<image src="http://img.cpgm.cc/cwxy/static/self/3.png" mode="widthFix" />
									<text>{{invitezs}}钻石</text>
								</view>
							</view>
						</view>
						<view class="button" @click="tworesult = false">开心收下</view>
					</view>
				</view>
			</view>
		</u-mask>



		<u-mask :show="luckyshow">
			<view class="warp">
				<view class="maskbox">
					<view class="in">
						<view class="title">
							<image src="http://img.cpgm.cc/cwxy/static/home/banner.png" mode="widthFix" />
							<text>任务奖励</text>
						</view>
						<view class="result_con">
							<p>恭喜您完成任务</p>
							<p>{{lucktitle}}</p>
							<view class="fleximg">
								<image :src=" luckytype==1?'http://img.cpgm.cc/cwxy/static/public/luck1.png':'http://img.cpgm.cc/cwxy/static/public/luck2.png' " mode="widthFix" />
								<image src="http://img.cpgm.cc/cwxy/static/public/rate.png" mode="widthFix" />
							</view>
						</view>
						<view class="button" @click="luckyshow = false">开心收下</view>
					</view>
				</view>
			</view>
		</u-mask>





	</view>
</template>

<script>
	export default {
		data() {
			return {
				tablist: [
					{
						id: 1,
						name: '潮玩任务',
						isrequest:true,
					},
					{
						id: 3,
						name: '游戏任务',
						isrequest:false,
					},
					{
						id: 2,
						name: '邀请任务',
						isrequest:false,
					},
				],
				stat: 1,
				tablist: [
					{
						id: 1,
						name: '潮玩任务',
						isrequest:true,
					},
					{
						id: 3,
						name: '游戏任务',
						isrequest:false,
					},
					{
						id: 2,
						name: '邀请任务',
						isrequest:false,
					},
				],
				stat: 1,
				list:[
					{
						id:1,
						name:'完成实名认证',
						raward:'奖励130元宝',
						type:1,
						num:130,
					},
					{
						id:2,
						name:'加入官方QQ群获得福利码',
						raward:'奖励30元宝',
						type:1,
						num:30,
					},
					{
						id:3,
						name:'赠送或被赠送1次钻石',
						raward:'奖励30元宝',
						type:1,
						num:30,
					},
					{
						id:4,
						name:'赠送或被赠送1次宝石',
						raward:'奖励30元宝',
						type:1,
						num:30,
					},
					{
						id:5,
						name:'完成人脸识别 + 获得7张潮玩兔卡',
						raward:'奖励2钻石',
						type:2,
						num:2,
					},
					{
						id:6,
						name:'开启5次普通潮盒',
						raward:'奖励30元宝',
						type:1,
						num:30,
					},
					{
						id:7,
						name:'开启5次高级潮盒',
						raward:'奖励100元宝',
						type:1,
						num:100,
					},
					{
						id:8,
						name:'开启5次黄金潮盒',
						raward:'奖励200元宝',
						type:1,
						num:200,
					},
					{
						id:9,
						name:'开启5次至尊潮盒',
						raward:'奖励500元宝',
						type:1,
						num:500,
					},
					{
						id:10,
						name:'使用潮玩兔卡挖到10宝石',
						raward:'奖励100元宝',
						type:1,
						num:100,
					},
					{
						id:11,
						name:'使用潮玩兔卡挖到30宝石',
						raward:'奖励300元宝',
						type:1,
						num:300,
					},
					{
						id:12,
						name:'使用潮玩兔卡挖到50宝石',
						raward:'奖励500元宝',
						type:1,
						num:500,
					},
					{
						id:13,
						name:'参与大逃杀10次',
						raward:'奖励100元宝',
						type:1,
						num:100,
					},
					{
						id:14,
						name:'参与大逃杀100次',
						raward:'奖励200元宝',
						type:1,
						num:200,
					},
				],
				invitelsit:'',
				carddatalist:'',
				check_nums:'',
				cards:'',
				show:false,
				numdata:'',
				gmlist:[
					{
						name:'首次回收豪华超跑',
						raward:'奖励1宝石',
						type:3,
						num:1,
					},
					{
						name:'首次回收劳斯莱斯',
						raward:'奖励2888宝石',
						type:3,
						num:2888,
					},
					{
						name:'自由之刃120级',
						raward:'奖励:幸运值+1000 钻石赠送手续费降到5%',
						type:0,
						num:1,
					},
					{
						name:'自由之刃180级',
						raward:'奖励:幸运值+2000 钻石赠送手续费降到2%',
						type:0,
					},
					{
						name:'自由之刃游戏内累计充值10元',
						raward:'额外奖励3钻石',
						type:2,
						num:3,
					},
					{
						name:'自由之刃游戏内累计充值100元',
						raward:'额外奖励10钻石',
						type:2,
						num:10,
					},
					{
						name:'自由之刃游戏内累计充值500元',
						raward:'额外奖励20钻石',
						type:2,
						num:20,
					},
					{
						name:'自由之刃游戏内累计充值1000元',
						raward:'额外奖励30钻石',
						type:2,
						num:30,
					},
					{
						name:'自由之刃游戏内累计充值3000元',
						raward:'额外奖励50钻石',
						type:2,
						num:50,
					},
					{
						name:'自由之刃游戏内累计充值10000元',
						raward:'额外奖励100钻石',
						type:2,
						num:100,
					},
				],
				qqurl:'',
				showresult:false,
				resulttitle:'',
				ybresult:false,//获得元宝
				zsresult:false,//获得元宝
				tworesult:false,//获得元宝
				currencytype:'',//货币类型  1为元宝，2为钻石，3为宝石
				inviteyb:'',
				invitezs:'',
				luckyshow:false, //关于信誉值弹窗
				lucktitle:'',//关于信誉值弹窗
				luckytype:1,//关于信誉值弹窗
			};
		},
		onLoad(){
			this.newTaskList();
			this.getQQInfo();
		},
		methods: {
			// tab切换
			tabchange(id) {
				this.stat = id
				if(id == 2 && !this.tablist[id - 1].isrequest) {
					this.faceList();
					this.cardList();
				}else if(id == 3 && !this.tablist[id - 1].isrequest) {
					this.gmTaskList();
				}
			},

			async getQQInfo() {
				let res = await this.$http.index.getQQInfo();
				this.qqurl = res.data.qqurl
			},
			// 一键加群
			enjoyqq() {
				if (window.plus) {
					if (this.$u.os() == 'ios') {
						location.href = this.qqurl
					} else if (this.$u.os() == 'android') {
						let w = plus.webview.create(this.qqurl);
						w.show();
						setTimeout(() => {
							plus.webview.close(w)
						}, 3500);
					} else {
						location.href = this.qqurl
					}
				}else {
					location.href = this.qqurl
				}
			},


			// 邀请任务获取列表
			async faceList(){
				let res = await this.$http.index.faceList();
				this.invitelsit = res.data
				this.check_nums = res.check_nums
				if(res.code == 1) {
					this.tablist[1].isrequest = true
				}
			},
			// 领取实名好友奖励
			async receiveface(item){
				console.log(item);
				if(item.is_rece) {
					this.$u.taost('奖励已领取')
				}else {
					let res = await this.$http.index.receFaceReward({
						cert_num:item.num
					})
					this.$u.toast(res.msg)
					if(res.code == 1) {
						this.faceList()
						this.resulttitle = item.jewel;
						this.currencytype = 2
						this.showresult = true
					}
				}
			},

			// 获取累计兔卡奖励
			async cardList(){
				let res = await this.$http.index.cardList();
				this.carddatalist = res.data
				this.cards = res.cards
				if(res.code == 1) {
					this.tablist[1].isrequest = true
				}
			},

			// 领取累计兔卡奖励
			async receivecard(item){
				if(item.is_rece) {
					this.$u.taost('奖励已领取')
				}else{
					let res = await this.$http.index.receCardReward({
						nums:item.num
					})
					this.$u.toast(res.msg)
					if(res.code == 1) {
						this.cardList();
						this.resulttitle = item.jewel;
						this.currencytype = 2
						this.showresult = true
					}
				}
			},

			// 获取新人任务列表
			async newTaskList(){
				let res = await this.$http.index.newTaskList();
				this.list = res.data.map((item,index) =>  {
					return {
						...this.list[index],
						...item
					}
				})
			},


			// 领取新人任务 弹窗完成，
			async receive(item) {
				if(!item.is_rece) {
					if(item.id == 2) {
						this.show = true
					}else {
						let res = await this.$http.index.newTask ({
							id:item.id
						});
						if(res.code == 1) {
							this.newTaskList();
							this.resulttitle = item.num;
							this.currencytype = item.type
							this.showresult = true
						}else {
							this.$u.toast(res.msg);
						}
					}
				}else {
					this.$u.toast('奖励已领取')
				}
			},


			// 输入兑换码
			async exchange(){
				if(this.numdata == '' || this.numdata == null) {
					this.$u.toast('请输入兑换码')
				}else {
					let res = await this.$http.index.newTask ({
						id:2,
						code:this.numdata
					});
					
					if(res.code == 1) {
						this.show = false
						this.newTaskList();
						this.resulttitle = 30;
						this.currencytype = 1
						this.showresult = true
					}else {
						this.$u.toast(res.msg);
					}
				}
			},


			// 获取游戏任务列表
			async gmTaskList(){
				let res = await this.$http.index.gmTaskList();
				this.gmlist = res.data.map((item , index)=> {
					return {
						...this.gmlist[index] , 
						...item
					}
				})
				if(res.code == 1) {
					this.tablist[2].isrequest = true
				}
			},

			// 领取游戏任务列表
			async getGmTask(item){
				let phone_type = this.$u.os();
				// console.log(item);
				if(item.is_rece) {
					this.$u.toast('奖励已领取')
				}else {
					let res = await this.$http.index.getGmTask({
						id:item.id,
						phone_type:phone_type
					})
					if(res.code == 1) {
						this.gmTaskList();
						if(item.id == 3) {
							this.lucktitle = '获得：幸运值+1000 钻石赠送手续费降到5%'
							this.luckytype = 1
							this.luckyshow = true
						}else if(item.id == 4) {
							this.lucktitle = '获得：幸运值+2000 钻石赠送手续费降到2%'
							this.luckytype = 2
							this.luckyshow = true
						}else{
							this.resulttitle = item.num;
							this.currencytype = item.type
							this.showresult = true
						}
					}else {
						this.$u.toast(res.msg)
					}
				}
			},
		},
	}
</script>

<style lang="less">

.zone {
	background: #001616;
	min-height: 100vh;
}

.main {
	padding: 10px;
	background: #002424 linear-gradient(180deg, #C8C8C8 0%, #FFFFFF 100%);
	box-shadow: inset 0px 2px 0px 0px rgba(255,255,255,0.5);
	border-radius: 19px 19px 0px 0px;
	min-height: calc(100vh - 70px);
}

.scorllbox {
	height: calc(100vh - 160px);
	margin-top: 10px;
}



// tab导航
.tab {
	width: 100%;
	align-items: center;
	display: flex;
	align-items: center;
	justify-content: space-between;

	view {
		width: 32%;
		height: 54px;
		text-align: center;
		line-height: 54px;
		color: rgba(255,255,255,0.2);
		font-size: 16px;
		font-weight: 600;
		border-radius: 4px;
		background: linear-gradient(180deg, #13151A 0%, #1C2026 100%);
		box-shadow: inset 0px 2px 0px 0px rgba(28,32,38,1);
		border-radius: 9px;
	}
}

.active {
	color: #fff !important;
	background: #383D47 !important;
	box-shadow: inset -4px 0px 0px 0px rgba(37,40,48,1) !important;
}


.list {
	margin-top: 10px;

	.item {
		background: linear-gradient(360deg, #232830 0%, #252B34 100%);
		box-shadow: inset 0px 1px 0px 0px rgba(255,255,255,0.5);
		border-radius: 8px;
		padding: 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 10px 0;

		.left {
			display: flex;
			flex-direction: column;

			p{
				color: #BDBECD;
				font-size: 13px;
				font-weight: 600;
				white-space: nowrap;
				text {
					color: #D9BD8D;
				}
			}
			view {
				color: #D9BD8D;
				font-size: 13px;
				font-weight: 600;
				display: flex;
				align-items: center;
				margin-top: 5px;	

				image {
					width: 20px;
					margin-right: 5px;
				}
			}

			.zs {
				width: 20px;
				margin-left: 5px;
			}
		}

		.button {
			width: 63px;
			height: 31px;
			background: #FFFFFF linear-gradient(90deg, #E5DAB7 0%, #D9BD8C 100%, #FDB9E4 100%);
			box-shadow: 0px 2px 0px 0px rgba(173,149,102,1);
			border-radius: 5px;
			color: #000000;
			font-size: 14px;
			font-weight: 600;
		}
	}
}

.grey {
	filter: grayscale(1);
}










// 转赠弹窗

.givebox {
	background: #fff;
	border-radius: 12px;
	padding: 15px;
	background-size: 100% 100%;

	.button {
		width: 60%;
		height: 45px;
		color: #fff;
		margin: 0 auto;
		margin-top: 20px;
		background: #000000;
		border-radius: 21px;
	}
}

.m_title {
	display: flex;
	align-items: center;
	justify-content: center;

	text {
		position: relative;
		color: #3271B4;
		font-size: 16px;
		margin: 0 10px;
		font-weight: 600;
		z-index: 99;
	}
}


.danb {
	flex: 1;
}

image {
	width: 12px;
}

.sjbox {
	position: relative;
	display: inline-block;
	left: 50%;
	transform: translateX(-50%);
	padding: 4px 10px;
	margin: 10px auto 0;
	background: #fff;
	border-radius: 10px;

	image {
		width: 15px;
		margin-right: 10px;
	}

	text {
		font-size: 12px;
	}
}

.m_list {
	margin-top: 20px;
}

.m_item {
	width: 100%;
	box-sizing: border-box;
	padding: 15px 10px;
	background: #F1EFFD;
	border-radius: 7px;
	border: 1px solid #000000;
	margin: 5px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;

	text {
		width: 30%;
		color: #333;
		font-weight: 600;
	}
	input {
		flex: 1;
		color: #333;
	}
}
.plch{
	color: #333;
	opacity: 0.8;
}

.closed {
	width: 30px;
	position: relative;
	left: calc(50% - 15px);
	margin-top: 20px;
}

.popbox {
	background: linear-gradient(180deg, #EACFB7 0%, #FFFFFF 100%);
	height: 300px;
	padding: 15px;
}

.flexbtn {
	display: flex;
	align-items: center;

	.button {
		width: 45% !important;
	}

	.quit {
		height: 50px;
		width: 45%;
		border-radius: 5px;
		background: linear-gradient(270deg, #6B72BF 0%, #888FDE 100%);
		box-shadow: 0px 3px 0px 0px rgba(53,46,105,1);
		border-radius: 4px;
		filter: grayscale(1);
	}

	.confirm {
		height: 50px;
		width: 45%;
		border-radius: 5px;
		background: linear-gradient(270deg, #6B72BF 0%, #888FDE 100%);
		box-shadow: 0px 3px 0px 0px rgba(53,46,105,1);
		border-radius: 4px;
	}
}



.explain {
	color: #fff;
	font-size: 12px;
	margin: 10px 0;
}


.w100 {
	width: 100%;
	margin-top: 10px;
}









// 兑换结果展示
.maskbox {
	background: #1D2D46;
	padding: 5px;
	border-radius: 10px;

	.in {
		background: #2F4160;
		padding: 15px;
		border-radius: 10px;
	}

	.title {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: -35px;
		position: relative;

		image {
			width: 70%;
		}
		text {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50% , -84%);
			font-size: 24px;
			font-weight: 600;
			color: #F4E9AA;
			line-height: 34px;
			text-shadow: 1px 1px 1px rgba(0,0,0,0.2), 1px -1px 1px rgba(0,0,0,0.2), -1px 1px 1px rgba(0,0,0,0.2), -1px -1px 1px rgba(0,0,0,0.2);
		}
	}

	.result_con {
		display: flex;
		flex-direction: column;
		align-items: center;

		p:nth-child(1) {
			color: #969FAE;
			font-size: 14px;
			margin-top: 10px;
		}
		p:nth-child(2) {
			color: #D9BD8C;
			font-size: 14px;
			font-weight: 600;
			margin: 25px 0;
		}
	}

	.ybnum {
		background: linear-gradient(180deg, #CFCFCF 2%, #F7F7F7 100%);
		box-shadow: inset 0px 2px 0px 0px rgba(255,255,255,0.5);
		border-radius: 4px;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: fit-content;
		padding: 10px;
		margin: 0 10px;

		image {
			width: 30px;
		}
		text {
			color: #FF6C40;
			font-size: 12px;
			margin-top: 5px;
		}
	}

	.button {
		background: linear-gradient(45deg, #E6D9B8 0%, #D9BD8C 100%);
		box-shadow: 0px 3px 0px 0px #a99368;
		border-radius: 4px;
		height: 50px;
		color: #2C313A;
		font-size: 16px;
		font-weight: 600;
		margin-top: 40px;
	}
}

.close2 {
	width: 30px;
	position: absolute;
	bottom: -60px;
	left: 50%;
	transform: translateX(-50%);
}

.flexbox {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}


.fleximg {
	display: flex;
	align-items: center;

	image {
		width: 75px;
		margin: 0 10px;
	}
}



</style>
